<!--
 * @Author: Li Zengkun
 * @Date: 2022-09-26 13:40:16
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-09-26 14:08:29
 * @Description: 
-->
<template>
  <div>
    <div class="left">
      <el-page-header @back="router.go(-1)" icon="ArrowLeft">
        <template #content>
          <span class="text-large font-600 mr-3"> 个人资料 </span>
        </template>
      </el-page-header>

      <el-card shadow="hover" class="user-info">
        <h2>个人资料</h2>
        <el-divider></el-divider>
        <div class="flex">
          <el-form :model="user" label-position="top">
            <el-form-item label="账号">
              <el-input v-model="user.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="user.nickname"></el-input>
            </el-form-item>
            <el-form-item label="账户名">
              <el-select v-model="user.sex">
                <el-option value="男">男</el-option>
                <el-option value="女">女</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model.number="user.tel"></el-input>
            </el-form-item>
          </el-form>
          <el-avatar :size="120">{{ user.nickname }}</el-avatar>
        </div>
        <el-divider></el-divider>
        <el-button
          @click="handleSave"
          type="primary"
          class="btn-font"
          round
          style="width: 100%"
          size="large"
          >保 存</el-button
        >
      </el-card>
    </div>
  </div>
</template>
 
<script setup>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { account } from "@/api";

const router = useRouter();
const store = useStore();

const user = ref(store.state.User.user);

console.log(user.value);

const handleSave = async () => {
  let { status, msg, data } = await account.edit(user.value);

  ElMessage({
    type: status ? "success" : "error",
    message: msg
  });
};
</script>

<style lang='less' scoped>
.left {
  width: 80%;
  position: relative;
  .el-card {
    margin-top: 20px;
  }
  .user-info {
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-form {
        flex: 1;
      }
      .el-avatar {
        margin-left: 120px;
        margin-right: 100px;
      }
    }
  }
}
</style>

